<template>
  <div>
    <el-form :model="form" :rules="rules" ref="ruleForm" class="form" size="medium" inline label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" style="width:220px" placeholder="请输入司机姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择司机性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="form.tel" style="width:220px" placeholder="请输入司机电话"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="请选择司机出生日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="驾龄" prop="driveLicenseDate">
        <el-date-picker
          v-model="form.driveLicenseDate"
          type="date"
          placeholder="请选择司机初次领证日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="medium">取 消</el-button>
      <el-button type="primary" @click="confirm" size="medium" :loading="btnLoading">确 定</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return{
      btnLoading:false,
      form:{
        birthday:"",
        driveLicenseDate:"",
        gender:"1",
        tel:"",
        name:"",
        supplierId:1
      },
      rules:{
        birthday: [{ required: true, message: '请选择司机出生日期', trigger: 'blur' }],
        driveLicenseDate: [{ required: true, message: '请选择司机初次领证日期', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择司机性别', trigger: 'blur' }],
        name: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入司机电话', trigger: 'blur' }],
      }
    }
  },
  props:{
    formData:{
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    formData:{
      handler(v){
        if(v){
          for(let k in this.form){
            if(k == 'gender'){
              this.form.gender = v.gender.toString()
            }else{
              this.form[k] = v[k]
            }
          }
        }else{
          this.$nextTick(()=>{
            this.form = {
              birthday:"",
              driveLicenseDate:"",
              gender:"1",
              tel:"",
              name:"",
              supplierId:1
            }
          })
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    cancel(){
      this.$emit('cancel')
    },
    confirm(){
      this.$refs['ruleForm'].validate(async (valid) => {
        if(valid){
          this.btnLoading = true
          let data = JSON.parse(JSON.stringify(this.form))
          data.birthday = moment(data.birthday).format('YYYY-MM-DD HH:mm:ss"')
          data.driveLicenseDate = moment(data.driveLicenseDate).format('YYYY-MM-DD HH:mm:ss')
          let res = ""
          if(this.formData){
            res = await this.$api.editDriver(this.formData.id,data)
          }else{
            res = await this.$api.addDriver(data)
          }
          this.btnLoading = false
          this.$refs.ruleForm.resetFields()
          if(res){
            this.$emit('confirm')
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .dialog-footer{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>